<template>
    <div :key="symbol" class="pb-108 no_touch">
        <!-- 头部区 -->
        <ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :balance="userInfo.balance"
            @tab="onTopTab" @update-coin="onUpdate">
        </ContractHeader>

        <div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
            <div class="mainBackground" key="x">
                <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
                    :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
                    :init-futrue="initFutrue" @ordered="onOrdered" :currentType="currentType"
                    @changeCurrentType="changeCurrentType" @changeValueBack="changeValueBack">
                </PerpetualOpen>
                <div class="line"></div>
                <!-- 委托/持仓-->
                <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
                    :order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold"
                    :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
                </PerpetualOrder>
            </div>
        </div>
        <div :class="{ slide1: animated2 }" v-else>
            <div class="mainBackground" key="y">
                <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
                    :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
                    :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
                </PerpetualOpen>
                <div class="line"></div>
                <!-- 委托/持仓-->
                <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
                    :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
                    :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
                </PerpetualOrder>
            </div>
        </div>
<!--        <div class="fixed w-full shadow z-10 tabBackground1">
            <div class="flex justify-between px-30 py-10">
                <span class="font-24 textColor2">{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t('k线图表') }}</span>
                <van-icon class="textColor" @click.stop="showCharts = !showCharts"
                    :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
            </div>
            <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
                :showBottom="false" />
        </div>-->
    </div>
</template>

<script>
import ContractHeader from '@/components/contract-header/index.vue'
import PerpetualOpen from '@/components/perpetual-open/index.vue'
import PerpetualOrder from '@/components/perpetual-order/index.vue'

import { _getBalance, _getDeepData, _initOpen, _initClose, _orderListCur, _orderListHold, _futrueOrderInit, _futrueOrderList } from '@/API/trade.api'
import { _getHomeList } from '@/API/home.api'
import { Popup, Swipe, SwipeItem } from 'vant';
import { mapActions, mapGetters } from 'vuex'
import { SET_COIN_LIST } from '@/store/const.store'
import { WS_URL } from '@/config'
import { getStorage } from '@/utils/utis'
import KLineCharts from '@/components/kline-charts'
var showLength = 7
export default {
    name: "perpetualContract",
    components: {
        ContractHeader,
        PerpetualOpen,
        PerpetualOrder,
        [Popup.name]: Popup,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        KLineCharts
    },
    computed: {
        ...mapGetters('user', ['userInfo']),
        ...mapGetters({
            coinList: 'home/coinList',
        }),
    },
    watch: {
        selectIndex(val) {
            showLength = 7
        }
    },
    data() {
        const initArr = []
        for (let i = 0; i < showLength; i++) {
            initArr.push({
                amount: '--',
                price: '--'
            })
        }
        return {
            quote: {},
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer1: null, // tab切换动画
            timer2: null, // 交割合约底部持仓等的公用定时器
            balance: 0,
            symbol: '',
            price: '',
            range: '',
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            sockets: {
                quotes: null, // 行情
                deep: null /// 深度
            },
            curTab: '', // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
            animated1: false,
            animated2: false,
            currentType: '',
            showCharts: false
            // curRequest: [], //
        }
    },
    async created() {

        if (!this.coinList.length) {
            await this.SET_COIN_LIST()
        }
        if (this.userInfo.token) {
          _getBalance().then(data => { // 获取用户余额
            this.$store.commit('user/SET_USERINFO', { balance: data.money })
            // const { money } = data
            // this.balance = money
          })
        }
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        onUpdate(symbol) { // 更新
            this.symbol = symbol
            this.closeSocket()
            this.init(symbol)
        },
        onRecall() { // 撤单or 平仓 evt
            this.clearTimer()
            _orderListHold(this.symbol).then(data => {

                this.orderHold = data
            })
            this[this.curTab](this.symbol)
            _initOpen(this.symbol).then(data => {
                this.initOpen = data
            })
        },
        onTopTab(evt) { // 当前tab 永续/交割
            this.keyIndex += 1
            this.selectIndex = evt
            this.clearTimer()
            if (this.selectIndex / 1 === 1) {
                //this.curTab = 'fetchOrderListCur'
                this.curTab = 'fetchOrderListHold'
                // this.animated1 = true
                // this.timer = setTimeout(() => {
                //     this.animated1 = false
                //     clearTimeout(this.timer)
                // }, 200)
                this.animated2 = true
                this.timer1 = setTimeout(() => {
                    this.animated2 = false
                    clearTimeout(this.timer1)
                }, 200)
            } else {
                // this.animated2 = true
                // this.timer = setTimeout(() => {
                //     this.animated2 = false
                //     clearTimeout(this.timer)
                // }, 200)
                this.animated1 = true
                this.timer1 = setTimeout(() => {
                    this.animated1 = false
                    clearTimeout(this.timer1)
                }, 200)
            }
            // console.log(this.curTab)
            this[this.curTab](this.symbol)
        },
        onOrdered(evt) { // 下单过后的回调
            this.clearTimer()
            // this.clearTimeout()
            this.initParam(this.symbol, evt) // 重新初始化
            // TODO: 这里要做判断
            if (this.selectIndex / 1 === 1) {
                this[this.curTab](this.symbol) // 重新调取记录
                // console.log('this.curTab', this.curTab)
            } else { // 交割合约
                this[this.curTab](this.symbol)
                // this.show = true
                // console.log('curTab', evt, this.curTab)

            }
            //console.log('下单后更新数据')
        },
        onTab(evt) { // 点击tab后的回调
            // console.log('evt', evt)
            this.clearTimer()
            // this.clearTimeout()
            this.curTab = evt
            this[evt](this.symbol)
        },
        fetchQoutes(symbol) { // 获取当前行情
            _getHomeList(symbol).then(data => { // 获取行情
                this.handleQoutes(data)
                this.startQuoteSocket() // socket
            })
        },
        handleQoutes(data) {
            if (data && data.length) {
                const cur = data[0]
                this.price = cur.close
                this.range = cur.change_ratio + ''
                this.quote = cur
                this.updateKey++
            }
        },
        fetchDeepData(symbol) {
            // console.log('sd')
            _getDeepData(symbol).then(data => { // 获取深度
                console.log(data)
                this.handleDeep(data)
                this.startDeepSocket() // socket
            })
        },
        handleDeep(data) {
            this.deepData = data
            const { asks, bids } = data
            this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength)
            this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength)
        },
        startQuoteSocket() { // 行情socket
            this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`)
            // socket.onopen =  () => {
            //     console.log('open')
            //     socket.send('hello')
            // }
            this.sockets.quotes.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.handleQoutes(_data)
                }
            }
        },
        startDeepSocket() {
            this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`)
            this.sockets.deep.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.handleDeep(_data)
                }
            }
        },
        initParam(symbol, type) { // 初始化参数
            if (type === 'open' || type === 'long' || type === 'short' || !type) {
                let initFunTimer = null;
                let initFun = () => {
                    _initOpen(symbol).then(data => {
                        this.initOpen = data
                        clearTimeout(initFunTimer)
                        initFunTimer = null
                    }).catch(err => {
                        initFunTimer = setTimeout(() => {
                            initFun()
                        }, 3000);
                    })
                }
                initFun()
            }
            if (type === 'close' || !type) {
                let initFunTimer = null;
                let initFun = () => {
                    _initClose(symbol).then(data => {
                        this.initClose = data
                        // console.log(this.initClose)
                        clearTimeout(initFunTimer)
                        initFunTimer = null
                    }).catch(err => {
                        initFunTimer = setTimeout(() => {
                            initFun()
                        }, 3000);
                    })
                }
                initFunTimer = setTimeout(() => {
                    initFun()
                }, 600);
            }
            if (type === 'futrue' || !type) {
                _futrueOrderInit(symbol).then(data => {
                    this.initFutrue = data
                })
            }
        },
        fetchOrderListCur(symbol) { // 当前委托
            //console.log('当前委托')
            if (this.userInfo.token) {
                _orderListCur(symbol).then(data => {
                    this.orderCur = data
                })
                this.clearTimer()
                this.timer = setInterval(() => {
                    _orderListCur(symbol).then(data => {
                        // if (typeof this.timer === 'string') {
                        //   this.timer = null
                        //   return
                        // }
                        this.orderCur = data
                    })
                }, 1000)
            } else {
                this.orderCur = []
            }
        },
        fetchOrderListHold(symbol) { // 当前持仓
            if (this.userInfo.token) {
                _orderListHold(symbol).then(data => {
                    // this.orderHold = data
                    this.orderHold = data.sort(this.sortData);
                })
                this.timer = setInterval(() => {
                    _orderListHold(symbol).then(data => {
                        // if (typeof this.timer === 'string') {
                        //   this.timer = null
                        //   return
                        // }
                        // this.orderHold = data
                        this.orderHold = data.sort(this.sortData);
                    })
                }, 1000)
            } else {
                this.orderHold = []
            }
        },
        fetchFutrueHoldList(symbol) { // 交割持仓
            if (this.userInfo.token) {
                let length = 0
                _futrueOrderList(symbol).then(data => {
                    // this.futrueHold = data
                    this.futrueHold = data.sort(this.sortData);
                    length = data.length
                })
                this.timer = setInterval(() => {
                    _futrueOrderList(symbol).then(data => {
                        // if (typeof this.timer === 'string') {
                        //   this.timer = null
                        //   return
                        // }

                        this.futrueHold = data.sort(this.sortData);
                        if (length != data.length) {
                            length = data.length
                            _futrueOrderInit(symbol).then(dataList => {
                                this.initFutrue = dataList
                            })
                        }
                    })
                }, 1000)
            } else {
                this.futrueHold = []
            }
        },
        fetchFutrueHistory(symbol) { // 交割历史持仓
            _futrueOrderList(symbol, 'hisorders').then(data => {
                this.futrueHistroy = data
                // this.clearTimeout()
            })
        },
        init(symbol) { // 初始化页面
            this.symbol = symbol.toLowerCase()
            if (!this.sockets.quotes) {
                this.startQuoteSocket()
            }
            if (!this.sockets.deep) {
                this.startDeepSocket()
            }
            this.initParam(symbol) // 'open'
            this.clearTimer()
            //if (this.curTab === 'fetchOrderListCur') {
            if (this.curTab === 'fetchOrderListHold') {
                //this.fetchOrderListCur(symbol)
                this.fetchOrderListHold(symbol)
            } else {
                this.fetchFutrueHoldList(symbol)
            }
        },
        closeSocket() {
            this.sockets.quotes && this.sockets.quotes.close()
            this.sockets.deep && this.sockets.deep.close()
            this.sockets.quotes = null
            this.sockets.deep = null
        },
        // clearTimeout(noNeed) {
        //     clearTimeout(this.timeout)
        //     if (noNeed) { // 防止timout定时器因接口返回继续触发
        //       this.timeout = ''
        //       return
        //     }
        //     this.timeout = null
        // },
        clearTimer() {
            clearInterval(this.timer)
            // if (isNeed) {
            //   this.timer = ''
            //   return
            // }
            this.timer = null
        },
        changeCurrentType(type) {
            this.currentType = type
        },
        changeValueBack(val) {
            if (val == 0) {
                showLength = 7
            } else {
                showLength = 13
            }
        },
        sortData(a, b) {
            return new Date(b.open_time).getTime() - new Date(a.open_time).getTime()
        }
    },
    mounted() {
        let symbol = this.$route.params.symbol
        // console.log(symbol)
        let catchSymbol = getStorage('symbol')
        if (!symbol && catchSymbol) {
            symbol = catchSymbol
        }
        if (this.selectIndex / 1 === 2) {
            this.curTab = 'fetchFutrueHoldList'
        } else {
            this.curTab = 'fetchOrderListHold'
        }
        this.symbol = symbol || 'btc'; 
        this.init(symbol)
    },
    activated() {
        this.currentType = this.$route.query.currentType ? this.$route.query.currentType : 'long'
        let symbol = this.$route.params.symbol
        let catchSymbol = getStorage('symbol')
        if (!symbol && catchSymbol) {
            symbol = catchSymbol
        }
        if (this.selectIndex / 1 === 2) {
            this.curTab = 'fetchFutrueHoldList'
        } else {
            this.curTab = 'fetchOrderListHold'
        }
        this.symbol = symbol || 'btc'; 
        this.init(symbol)
    },
    // beforeRouteEnter(to, from, next) {
    //     let { params: { symbol }, query: { selectIndex } } = to
    //     // if(this.$route.query.selectIndex) {
    //     //   this.selectIndex = this.$route.query.selectIndex
    //     // }
    //     let catchSymbol = getStorage('symbol')
    //     if (!symbol && catchSymbol) {
    //         symbol = catchSymbol
    //     }
    //     if (symbol) {
    //         next(vm => {
    //             if (selectIndex) {
    //                 vm.selectIndex = selectIndex
    //                 if (vm.selectIndex / 1 === 2) {
    //                     vm.curTab = 'fetchFutrueHoldList'
    //                 } else {
    //                     //vm.curTab = 'fetchOrderListCur'
    //                     vm.curTab = 'fetchOrderListHold'
    //                 }
    //             } else {
    //                 //vm.curTab = 'fetchOrderListCur'
    //                 vm.curTab = 'fetchOrderListHold'
    //             }
    //             vm.symbol = symbol
    //             vm.init(symbol)
    //         })
    //     } else {
    //         next()
    //     }
    // },
    deactivated() {
        this.closeSocket()
        this.clearTimer()
    },
    beforeDestroy() {
        this.closeSocket()
        // this.clearTimeout(true)
        this.clearTimer()
    }
}

</script>

<style lang="scss" scoped>
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)
//}
//.list-enter, .list-leave-to
//  /* .list-leave-active for below version 2.1.8 */ {
//  transform: translateY(0)
//}
.no_touch {
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    padding-bottom: 150px !important;
}

.list-enter-active,
.list-leave-active {
  will-change: transform;
  transition: all 250ms;
}

.list-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.list-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.rounded-view {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-sizing: border-box;
}

.my-swipe {
  width: 100%;
}

.my-swipe .van-swipe-item {}

.line {
    height: 13px;

    @include themify() {
        background: themed("tab_background");
    }
}

@keyframes animate1 {
  0% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }

  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

@keyframes animate2 {
  0% {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }

  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

.slide1 {
  animation: animate1 200ms linear;
}

.slide2 {
  animation: animate2 200ms linear;
}

.line {
    @include themify() {
        background: themed("divi_line");
    }
}

::v-deep .contract-header {
    @include themify() {
        background: themed("main_background");
    }
}

.tabBackground1 {
    @include themify() {
        border: 1px solid themed("border_color1");
    }
}

.shadow {
  //bottom: 108px;
  bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box;
}
</style>
